<!--
 * @Description: 
 * @Author: 赵开玉
 * @Date: 2022-05-16 17:23:18
 * @LastEditors: 刘盛
 * @LastEditTime: 2022-05-17 19:36:55
-->
<template>
<div>
    <div class="manager">
      <div class="orderConfirm">
        <van-nav-bar
         title="订单确认" 
         left-text="返回" 
         left-arrow @click-left="$router.back('product')"/>
        <div class="bg">
          <div>
            <van-cell 
            v-model="addressValue"
             size="large"
            title="服务地址" 
            icon="location-o"
             @click="showPopup"
             
             />
            <van-popup v-model="show" round closeable position="bottom" :style="{ height: '75%' }">
              <van-nav-bar
                title="选择地址"  
              />
              <!-- 地址列表 -->
              <van-address-list   switchable add-button-text="确定" @save="onSave"  class="address-list" v-model="chosenAddressId"
    :list="addressData" 
    />
              </van-popup> 
          </div>
          <div>
            <van-cell  
            size="large" 
            title="订单详情" 
            icon="orders-o"
            label=""
            
            >
          <van-divider class="xian" dashed >总计：￥0 </van-divider>
            </van-cell>
          </div>
          <div>
            <van-cell 
              v-model="timeValue" 
              size="large" 
              title="服务时间"
              icon="clock-o"
             
              @click="showPopup1"
             />
             
             <van-popup v-model="show1"  position="bottom" :style="{ height: '50%' }">
             <!-- 服务时间选择 -->
             <van-datetime-picker
                :filter="filter"
                v-model="currentDate"
                type="datetime"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="formatter"
                @confirm="confirm"
                @cancel="cancel"
              /> 
              
              
              </van-popup>
          </div>  
        </div>
        <van-button 
        class="qued" 
        round type="primary"
        @click="$router.push('order')"
        >确认提交</van-button>
      </div>
      
    </div>
   </div>
</template>
 

 
<script>
import{pageQueryProductCategory,pageQueryProduct,pageQueryAddress} from "@/api/index.js";
export default {
  data() {
    return {
      show: false,
      // 地址数据
      chosenAddressId: '1',
      addressData:[],
      // 订单详情数据
      // 所有的产品的数据
      productDataTotal: [],
      // 购物车总价格
      productByCategoryData: [],
      totalPrice: 0,
      
      show1:false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2050, 12, 31),
      currentDate: new Date(),
      timeValue:''
      
    };
    
    
  },
  
  computed: {},
  methods: {
  
    // 点击确定
  confirm() {
   this.show1 = false;
   this.timeValue =
    this.currentDate.getFullYear() +
    "年" +
    (Number(this.currentDate.getMonth()) + 1) +
    "月" +
    this.currentDate.getDate() +
    "日 " +
    this.currentDate.getHours() +
    ":" +
    this.currentDate.getMinutes()+
    ":"+
    this.currentDate.getSeconds();
   this.timeValue1 = new Date(this.currentDate).getTime() / 1000;
  },
  // 点击取消
  cancel() {
   this.show1 = false;
  },
  formatter(type, value) {
   // 格式化选择器日期
   if (type === "year") {
    return `${value}年`;
   } else if (type === "month") {
    return `${value}月`;
   } else if (type === "day") {
    return `${value}日`;
   } else if (type === "hour") {
    return `${value}时`;
   } else if (type === "minute") {
    return `${value}分`;
   }
   return value;
  },
  showPopup() {
      this.show = true;
    },  
  showPopup1() {
      this.show1 = true;
    },

    // 获取订单详情
  
  // 获取地址、地址确认
  
  async loadAddress(){
      let res = await pageQueryAddress({page:1,pageSize:6,});
      //this.addressData = res.data.data.list;
      let data = res.data.data.list
      data.forEach(address => {
        let newdata = {
          id:address.id,
          name:address.username,
          tel:address.telephone,
          address:`${address.province}${address.city}${address.area}${address.address}`,
          isDeafaulet:Boolean(address.isDefault),
        }
        this.addressData.push(newdata)
      });
    },
  },
  created() {
    this.loadAddress();
    this.loadCategory();
  },
  mounted() {  
  }
};

</script>
<style scoped>
/* 图标的样式 */
.van-icon{
 margin-left: 20px;
 margin-top: 10px;
 float: left;
}
/* 文字说明样式 */
.title{
  margin-top: 10px;
  float: left;
  font-size: 16px;
  color: #0c0c15;
}

.qued{
   width: 60%;
   height: 30px;
   background-image: linear-gradient(90deg,#7579ff,#bf73ff);
   text-align: center;
   color: #fff;
   border-radius: 22px;
   line-height:40px ;
    margin: 88px ;
   margin-top: 2em;
   cursor: pointer;
 }
 
</style>
